import { useMount, useRequest } from 'ahooks'
import { useRef, useEffect, useState } from 'react'
import { Select, Radio, ConfigProvider } from 'antd'
import './TelisSchedule.scss'
import { Http } from '../../../../Common/Api'

const { mars3d } = window

const initData = {
    scene: {
        sceneMode: 3,
        center: { lat: 45.178838, lng: 126.418588, alt: 36955586.2, heading: 359.7, pitch: -83.5 },
        orderIndependentTranslucency: false,
        contextOptions: { webgl: { alpha: true } },
        globe: { baseColor: 'rgba(100,100,100,0.15)' },
        showSkyBox: false,
    },
    basemaps: [
        {
            id: 1,
            type: 'tdt',
            layer: 'img_d',
            name: '天地图影像(无标注)',
            popup: 'all',
            icon: 'img/basemaps/tdt_img.png',
        },
    ],
    layers: [
        {
            name: '网格线',
            type: 'grid',
            color: '#ffffff',
            alpha: 0.03,
            cells: 2,
            show: true,
        },
    ],
    control: {
        homeButton: false,
        zoom: false,
        fullscreenButton: false,
        geocoder: 'gaode',
        baseLayerPicker: false,
        locationBar: false,
        distanceLegend: false,
    },
}

const HeYiTunnelList = {
    '12e80720-a302-4d1b-b252-6c81fcae1748': {
        title: '摩天岭隧道',
        url: 'https://image.ljkjkf.com/intellisiteSystem_TieKe/HeYi/tiles/motianlingjindu/tileset.json',
        bimFilesUuid: 'B0FF1C15-DE5E-4748-9F55-A7A42EED29CE',
        alt: -480,
        ACenter: { lat: 45.027246, lng: 125.953004, alt: 1201.9, heading: 359.7, pitch: -83.5 },
        HCenter: { lat: 45.024282, lng: 125.96123, alt: 215, heading: 330.8, pitch: -27.2 },
        YCenter: { lat: 45.027435, lng: 125.94385, alt: 310.4, heading: 49.1, pitch: -43.2 },
    },
    '159cc1e2-02a3-49b7-9eb6-ecaf91c90ad6': {
        title: '丰林隧道',
        url: 'https://image.ljkjkf.com/intellisiteSystem_TieKe/HeYi/tiles/fenglinjindu/tileset.json',
        bimFilesUuid: 'ECE4DBB9-8B69-4EB0-B9CC-AEBB819C49C8',
        alt: -310,
        ACenter: { lat: 44.999452, lng: 125.945707, alt: 361.1, heading: 355.6, pitch: -42.3 },
        HCenter: { lat: 45.002095, lng: 125.949844, alt: 166.8, heading: 313.3, pitch: -37.2 },
        YCenter: { lat: 45.000945, lng: 125.942091, alt: 114.2, heading: 22.7, pitch: -25.9 },
    },
    '37cbeb6f-1f20-4274-90fd-cf0a02bd01ba': {
        title: '峰岩山隧道',
        url: 'https://image.ljkjkf.com/intellisiteSystem_TieKe/HeYi/tiles/fengyanshansuidaojindu/tileset.json',
        bimFilesUuid: '6F1E9E5C-FC0D-4905-8272-BE41E345B74A',
        alt: -400,
        ACenter: { lat: 45.011572, lng: 125.855755, alt: 4414.4, heading: 359.7, pitch: -83.5 },
        HCenter: { lat: 45.005752, lng: 125.879833, alt: 480.3, heading: 352.2, pitch: -35.6 },
        YCenter: { lat: 45.017148, lng: 125.827055, alt: 300.3, heading: 40, pitch: -31.5 },
    },
}

// 鹤伊telis进度
export const TelisScheduleHY001 = () => {
    const MapBox = useRef()

    const [Map, setMap] = useState()

    const { runAsync } = useRequest(Http, { manual: true })

    const [TunnelActive, setTunnelActive] = useState()

    const [CenterOptions] = useState([
        { label: '伊春方向', value: 'YCenter' },
        { label: '全景视角', value: 'ACenter' },
        { label: '鹤岗方向', value: 'HCenter' },
    ])

    const [CenterActive, setCenterActive] = useState('ACenter')

    useEffect(() => {
        if (TunnelActive) {
            const { url, ACenter, alt, bimFilesUuid } = HeYiTunnelList[TunnelActive]
            runAsync({
                url: 'getBIMCompleteModlesInfoExternalId',
                data: { bimFilesUuid, tunnelInfoUuid: TunnelActive },
            }).then(res => {
                Map.clear()
                const data = res.tunnelLengthList.flatMap(({ models }) => models)
                // eslint-disable-next-line no-template-curly-in-string
                const entranceDbId = data.map(item => ['${DbId}===' + item, 'rgba(0,255,0,0.5)'])
                const tilesetLayer = new mars3d.layer.TilesetLayer({
                    type: '3dtiles',
                    position: { lng: 126, lat: 45, alt },
                    maximumScreenSpaceError: 1,
                    maximumMemoryUsage: 1024,
                    skipLevelOfDetail: true,
                    preferLeaves: true,
                    dynamicScreenSpaceError: true,
                    cullWithChildrenBounds: false,
                    url,
                    flyTo: true,
                    style: { color: { conditions: [...entranceDbId, ['true', 'rgba(0,0,0,0.05)']] } },
                })
                tilesetLayer.clampToGround(10)
                Map.addLayer(tilesetLayer)
                Map.centerAt(ACenter)
                setCenterActive('ACenter')
            })
        }
    }, [Map, runAsync, TunnelActive])

    useMount(() => {
        const map = new mars3d.Map(MapBox.current, initData)
        // map.basemap = 1
        setMap(map)
        setTunnelActive('12e80720-a302-4d1b-b252-6c81fcae1748')
    })
    return (
        <div className="TelisScheduleHY001">
            <div className="Mars3d" ref={MapBox} />
            <div className="Select">
                <Select
                    defaultValue={'12e80720-a302-4d1b-b252-6c81fcae1748'}
                    style={{ width: 160 }}
                    options={[
                        { label: '摩天岭隧道', value: '12e80720-a302-4d1b-b252-6c81fcae1748' },
                        { label: '丰林隧道', value: '159cc1e2-02a3-49b7-9eb6-ecaf91c90ad6' },
                        { label: '峰岩山隧道', value: '37cbeb6f-1f20-4274-90fd-cf0a02bd01ba' },
                    ]}
                    onChange={e => {
                        console.log(e)
                        setTunnelActive(e)
                    }}
                />
                <Radio.Group
                    value={CenterActive}
                    options={CenterOptions}
                    optionType="button"
                    buttonStyle="solid"
                    onChange={e => {
                        Map.centerAt(HeYiTunnelList[TunnelActive][e.target.value])
                        setCenterActive(e.target.value)
                    }}
                />
            </div>
        </div>
    )
}
